import React, { useState } from 'react'
import { ResultPage, Card, Switch,Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import Mytime from './components/Mytime'
import Myfilter from './components/Myfilter'
import img from '../src/img/tu.png'
function App() {
  let [start,setstart]=useState('北京')
  let [end,setend]=useState('上海')
  let [time,settime]=useState(new Date())
  console.log(time)
  // 点击互换
  let dian=()=>{
    let tep=start
    setstart(end)
    setend(tep)
  }
  return (
    <div>
     <ResultPage
      status=''
      title='火车票预定'
      description='便携购票，服务您的每次出行'
    >
      <ResultPage.Card style={{ padding: 8,fontSize:'15px' }}>
        {/* 城市 */}
       <div style={{display:'flex',justifyContent:'space-between'}}>
        <span>{start}</span>
         <span onClick={()=>dian()}><LoopOutline /></span>
          <span>{end}</span>
       </div>
      {/* 日期 */}
       <div  style={{display:'flex',marginTop:'10px'}}>
       <Mytime time={time}></Mytime> <span style={{color:'#ccc'}}>周二(今天)</span>
       </div>
       <div style={{display:'flex',justifyContent:'space-between',marginTop:'10px'}}>
        <span style={{color:'#ccc'}}>只看高铁/动车</span><Switch></Switch>
       </div>
       {/* 按钮 */}
        <Button block color='warning' size='mini'>
         搜索
        </Button>
      </ResultPage.Card>
    {/* 去重 */}
      <Card style={{ height: 70, marginTop: 12 }}>
        <Myfilter></Myfilter>
      </Card>
      <img style={{width:'100%'}} src={img} alt="" />
    </ResultPage>
    </div>
  )
}

export default App
